import * as echarts from 'echarts'
import React, { Component } from "react";
import PropTypes from 'prop-types'

import "./App.css";



var option;

var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';

var dataCount = 2e5;
var data = generateOHLC(dataCount);

var option = {
  dataset: {
    source: data
  },
  title: {
    text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  toolbox: {
    feature: {
      dataZoom: {
        yAxisIndex: false
      },
    }
  },
  grid: [
    {
      left: '10%',
      right: '10%',
      bottom: 200
    },
    {
      left: '10%',
      right: '10%',
      height: 80,
      bottom: 80
    }
  ],
  xAxis: [
    {
      type: 'category',
      scale: true,
      boundaryGap: false,
      // inverse: true,
      axisLine: { onZero: false },
      splitLine: { show: false },
      splitNumber: 20,
      min: 'dataMin',
      max: 'dataMax'
    },
    {
      type: 'category',
      gridIndex: 1,
      scale: true,
      boundaryGap: false,
      axisLine: { onZero: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { show: false },
      splitNumber: 20,
      min: 'dataMin',
      max: 'dataMax'
    }
  ],
  yAxis: [
    {
      scale: true,
      splitArea: {
        show: true
      }
    },
    {
      scale: true,
      gridIndex: 1,
      splitNumber: 2,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false }
    }
  ],
  dataZoom: [
    {
      type: 'inside',
      xAxisIndex: [0, 1],
      start: 10,
      end: 100
    },
    {
      show: true,
      xAxisIndex: [0, 1],
      type: 'slider',
      bottom: 10,
      start: 10,
      end: 100
    }
  ],
  visualMap: {
    show: false,
    seriesIndex: 1,
    dimension: 6,
    pieces: [{
      value: 1,
      color: upColor
    }, {
      value: -1,
      color: downColor
    }]
  },
  series: [
    {
      type: 'candlestick',
      itemStyle: {
        color: upColor,
        color0: downColor,
        borderColor: upBorderColor,
        borderColor0: downBorderColor
      },
      encode: {
        x: 0,
        y: [1, 4, 3, 2]
      }
    },
    {
      name: 'Volumn',
      type: 'bar',
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle: {
        color: '#7fbe9e'
      },
      large: true,
      encode: {
        x: 0,
        y: 5
      }
    }
  ]
};

function generateOHLC(count) {
  var data = [];

  var xValue = +new Date(2011, 0, 1);
  var minute = 60 * 1000;
  var baseValue = Math.random() * 12000;
  var boxVals = new Array(4);
  var dayRange = 12;

  for (var i = 0; i < count; i++) {
    baseValue = baseValue + Math.random() * 20 - 10;

    for (var j = 0; j < 4; j++) {
      boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
    }
    boxVals.sort();

    var openIdx = Math.round(Math.random() * 3);
    var closeIdx = Math.round(Math.random() * 2);
    if (closeIdx === openIdx) {
      closeIdx++;
    }
    var volumn = boxVals[3] * (1000 + Math.random() * 500);

    // ['open', 'close', 'lowest', 'highest', 'volumn']
    // [1, 4, 3, 2]
    data[i] = [
      echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
      +boxVals[openIdx].toFixed(2), // open
      +boxVals[3].toFixed(2), // highest
      +boxVals[0].toFixed(2), // lowest
      +boxVals[closeIdx].toFixed(2),  // close
      volumn.toFixed(0),
      getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
    ];
  }

  return data;

  function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
    var sign;
    if (openVal > closeVal) {
      sign = -1;
    }
    else if (openVal < closeVal) {
      sign = 1;
    }
    else {
      sign = dataIndex > 0
        // If close === open, compare with close of last record
        ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
        // No record of previous, set to be positive
        : 1;
    }

    return sign;
  }
}








class Content extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name,
      opacity: 1.0
    };
  }
  componentWillMount() {
    console.log('Component WILL MOUNT!')
  }
  componentDidMount() {
    debugger
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    console.log('Component DID MOUNT!')
    option && myChart.setOption(option);
  }
  componentWillReceiveProps(newProps) {
    console.log('Component WILL RECEIVE PROPS!')
  }
  shouldComponentUpdate(newProps, newState) {
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    console.log('Component WILL UPDATE!');
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
    console.log('Component WILL UNMOUNT!')
  }

  test(e) {
    console.log(e)
  }

  render() {
    return (
      <div>
        {/* <h3>{this.props.myNumber}</h3> */}
        {/* <ul>
          {this.props.list.map(item => {
            return <li>{item}</li>
          })}
        </ul> */}
        {/* <div onClick={this.test}>adsf</div> */}
        <div id="main2"></div>
      </div>
    );
  }
}

Content.proTypes = {
  name2: PropTypes.string,
  list: PropTypes.array
}
Content.defaultProps = {
  name2: 'asdf',
  list: [1, 2, 3]
}

export default Content;